<!DOCTYPE html>
<html>
<#include "include/header.html"/>
<body id="game" class="wheel wheel2">
	<div class="page">
		<div class="content">
		    <img src="${ctx}/resource/images/wx/banner.png" class="banner">
			<div class="wrap">
			<#if championUser??>
				 <div class="info">
                     <div class="coins">我的活力币：<span id="myEnergyCurrency">${championUser.energy_currency!}</span></div>
                 </div>  
				
				</#if>
				<!-- 导航栏 -->
				<nav>
					<ul>
              <li><a href="${ctx}/home/homePage"><img src="${ctx}/resource/images/wx/btn1.png"></a></li>
              <li><a href="${ctx}/home/forwardEuropeGuessing"><img src="${ctx}/resource/images/wx/btn2.png"></a></li>
            </ul>
				</nav>
				
				
				<!-- 转盘 -->
				<div id="wheel">
				<div class="w-wrapper">
					<img src="${ctx}/resource/images/game/wheel/zp_btm.png?20160409"> <img
						src="${ctx}/resource/images/game/wheel/zp_w2.png?20160409"> <img
						src="${ctx}/resource/images/game/wheel/zp_w.png?20160409" id="zp"> <img
						src="${ctx}/resource/images/game/wheel/zp_logo.png?20160409"> <img
						src="${ctx}/resource/images/game/wheel/zp_btn.png?20160409"> <img
						src="${ctx}/resource/images/game/wheel/zp_btn.png?20160409" id="go">
				</div>
				</div>
			</div>

			<!-- 成功，填写信息 -->
			<div class="dialog success">
				<div class="d-body">
					<div class="inner">
						<img src="${ctx}/resource/images/game/wheel/success_head.png">
						<div id="prize_url">
							<img src="${ctx}/resource/images/game/wheel/gift3.png"
								class="gift">
								<span class="gift-name"></span>
						</div>
						<p>
							请准确填写以下信息，否则将视为自动放弃奖品。<span>（奖品发放等信息请关注@小样君 官微微信）</span>
						</p>
						<form>
							<div class="row">
								<label>姓名：</label> <input id="real_name" type="text" />
							</div>
							<div class="row"">
								<label>电话：</label> <input id="telephone" type="tel" />
							</div>
							<div class="row">
								<label>地址：</label>
								<textarea id="address"></textarea>
							</div>
							<div class="row form-msg"></div>
						</form>
					</div>
				</div>
				<div class="d-footer">
					<img src="${ctx}/resource/images/index/dialog_btn_back.png"
						class="btn btns back" alt="" onclick="dialogWheelClose()">
					<!--返回按钮-->
					<img src="${ctx}/resource/images/index/dialog_btn_yes.png"
						class="btn btns yes" alt="" onclick="submit()">
					<!--确认按钮-->
				</div>
			</div>
			<!-- 提交失败 -->
			<div class="dialog fail">
				<div class="d-body" id="fail_message">
					<p class="message">系统繁忙 请稍后再试</p>
				</div>
				<div class="d-footer">
					<img src="${ctx}/resource/images/index/dialog_btn_back.png"
						class="btn one back" alt="" onclick="dialogClose()">
					<!--返回按钮-->
				</div>
			</div>
			   <!-- 兑换成功 -->
      <div class="dialog exchange-success">
        <div class="d-body" >
        </div>
        <div class="d-footer">
          <img src="${ctx}/resource/images/index/dialog_btn_back.png" class="btn one back" alt="" onclick="dialogClose()"> <!--返回按钮-->
        </div>
      </div>
		</div>
	</div>
	<div class="mask"></div>
	<#include "include/foot.html"/>
	<script>
		//逆时针算角度
		var win_id = "";
		var prizse_id = "";
		var prize_pic_url = "";
		var prize_name = "";
		 <#if championUserExchang??>
        prize_pic_url="${server_uri!}${championUserExchang.prisze_pic!}";
        win_id="${championUserExchang.id!}";
        var picUrl = "<img src='"+prize_pic_url+"' class='gift'><span class='gift-name'>${championUserExchang.prizse_name!}</span>";
				$("#prize_url").html(picUrl);
				//后端处理成功
				dialog(".success")
 </#if>
 function styleCoin() {
        var str = $(".coins").find("span").text().trim();
        var html = "";
        for (var i = 0; i < str.length; i++) {
          if (str.length > 4) {
            html += ('<span class="coin-sm">' + str[i] + '</span>')
          } else if (str.length > 3) {
            html += ('<span class="coin-md">' + str[i] + '</span>')
          } else {
            html += ('<span class="coin-lg">' + str[i] + '</span>')
          }
        }
        $(".coins").find("span").html(html)
      }

      //styleCoin();
 function dialogWheelClose(){
   window.location.href="${ctx}/home/homePage";
 }
  function fixWheelLayout() {
        if ($("#wheel img").width() > $("#wheel").innerWidth()) {
          $("#wheel img").height($("#wheel").innerWidth() / (548/594));
        }

        $(".w-wrapper").width($("#wheel img").width()).height($("#wheel img").height());
        $("#wheel").css({visibility: "visible"});
      }

      window.onload = function() {
        fixWheelLayout();
      }
 
		$(function() {
			var wheel = function(awards, angle, result) { //中奖函数， awards:奖项，angle:奖项对应的角度
				$("#zp").rotate({
					angle : 0,
					duration : 5000, //时间
					animateTo : 360 * 4 + angle, //圈数
					center : [ "49.89899%", "42.58289%" ],
					callback : function() {
						if (result == "0") {
						var msgHtm = "<p class='message'>谢谢参与</p>";
					$("#fail_message").html(msgHtm);
					dialog(".fail");
						} else {
						    
							win(result, prize_pic_url,prize_name);
						}
						$("#go").show();
					}
				});
			};
			 var fromUser1=$.cookie('fromUser1');
			$("#go")
					.click(
							function() {
							 //time=0网络超时，time=1正常运行大转盘，如需考虑网络超时，需要判断time=1或0。
							 statistics(); //cnzz统计
										$.ajax({
											type : "POST",
											url : "${ctx}/home/turntableExchang",
											async : false,
											data :{
												content:"我在#来吧冠军#小样乳酸盐杯·全民冠军赛的拼手气环节中，成功兑换到了“用户抽到的奖品”！据说还有一大波豪礼及现金红包正在路上，你也来和我拼下手气吧！http://lbgj.fansiji.com/xyChampion/home/homePage?source=prize",
									            pic:"/alidata/server/tomcat-7.0.54/webapps/xyChampion/resource/images/index/qd_dialog_banner_1.jpg"
											},success : function(json) {
											        var data=0;
													if (json.code == 0) {
														$("#myEnergyCurrency").html(json.myEnergyCurrency);
														win_id = json.exchang_id;
														prizse_id = json.prizse_id;
														prize_pic_url = json.prize_pic_url;
														data = json.prisze_position;
														prize_name = json.prizse_name;
													} else {
														$("#myEnergyCurrency").html(json.myEnergyCurrency);
														if (json.code == 1) {
														var randomNum=Math.floor(Math.random()*2+1);
                                                         data = 4*randomNum;
														} else {
															if (json.code == 3) {
																var msgHtm = "<p class='message'>"
																		+ json.msg
																		+ "</p>";
																$(
																		"#fail_message")
																		.html(
																				msgHtm);
																dialog(".fail");
																return;
															}
														}
													}
													if (data == 1) {
													wheel(1, 22.5, '1')
												}
												if (data == 2) {
													wheel(2, 67.5, '2')
												}
												if (data == 3) {
													wheel(3, 112.5, '3')
												}
												if (data == 4) {
													wheel(4, 157.5, '0')
												}
												if (data == 5) {
													wheel(5, 202.5, '4')
												}
												if (data == 6) {
													wheel(6, 247.5, '5')
												}
												if (data == 7) {
													wheel(7, 292.5, '6')
												}
												if (data == 8) {
													wheel(8, 337.5, '0')
												}
												//转动时，禁止连续点击开始按钮
												$("#go").hide();
												}
												
										});

							});

			function win(gift_code, pic_url,prize_name) {
				//发起请求把结果告诉后端, gift_code是礼物编号(1,2,3)
				var picUrl = "<img src='"+pic_url+"' class='gift'><span class='gift-name'>"+prize_name+"</span>";
				$("#prize_url").html(picUrl);
				//后端处理成功
				dialog(".success")

				//后端处理失败
				//$(".dialog.fail").find(".message").text(/*错误信息*/);
				//dialog(".fail")
			}

		})
		//提交个人信息
		function submit() {
		statistics(); //cnzz统计
			var realName = $("#real_name").val();
			var telephone = $("#telephone").val();
			var address = $("#address").val();
			if (realName == null || telephone == null || address == null
					|| realName == "" || telephone == "" || address == "") {
				/* var msgHtm = "<p class='message'>请填写完整信息</p>";
				$("#fail_message").html(msgHtm);
				dialog(".fail"); */
				onError("请填写完整信息");
				return;
			}
			$.post("${ctx}/home/ExchangTurntablePrize", {
				id : win_id,
				realName : realName,
				telephone : telephone,
				prizse_id : prizse_id,
				address : address
			}, function(data) {
				if (data.code == 0) {
				dialog(".exchange-success");
				} else {
					var msgHtm = "<p class='message'>" + data.msg + "</p>";
					$("#fail_message").html(msgHtm);
					dialog(".fail");
				}
			});
		}
	</script>
</body>
</html>